<template>
    <div style="width:100%;height:100%;">
        <div :id="this.id" ref="map" class="mapdiv vue-no-drag-handle" style="width:100%;height:100%;background:#abfbe7"></div>
        <div>
            <div class="edit">
                <i @click="openMap" title="编辑" class="fa fa-edit" aria-hidden="true"></i>
            </div>
            <div class="close">
                <i @click="deleteMap" title="关闭" class="fa fa-trash" aria-hidden="true"></i>
            </div>
            <div class="vue-draggable-handle">
                <i class="fa fa-arrows-alt" aria-hidden="true"></i>
            </div>
        </div>
    </div>
</template>

<script>
    import "openlayers/dist/ol-debug.js";

    let source = new ol.source.Vector({wrapX: false});
    let vector = new ol.layer.Vector({
        source: source
    });
    export default {
        name: "mapDiv",
        data() {
            return {
                map: null,
                showMapParams: {}
            }
        },
        props: {
            id: String,
            // showMapParams:Object
        },
        methods: {
            openMap() {
                this.$emit('openMap');
                this.$Bus.$emit('isDialog', true)
            },
            deleteMap() {
                let nowElement = document.getElementById(this.id).parentElement.id;
                this.$emit('deleteSelectElement', nowElement);
            },
            mapInit() {
                this.$nextTick(function () {
                    let that = this;
                    that.$refs.map.innerText = null;
                    let gaode_layer = new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            url:
                                "http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
                        }),
                        projection: "EPSG:3857"
                    });
                    that.map = new ol.Map({
                        target: this.id,
                        layers: [gaode_layer, vector],
                        view: new ol.View({
                            center: ol.proj.transform([116.4, 39.9], "EPSG:4326", "EPSG:3857"), //初始化中心为北京
                            zoom: 10,
                            minZoom: 3,
                            maxZoom: 18
                        }),
                        controls: ol.control
                            .defaults({
                                attributionOptions: {collapsible: false},
                                rotateOptions: {className: "custom-rotate"}
                            })
                            .extend([
                                new ol.control.OverviewMap({
                                    collapsible: false,
                                    collapsed: false,
                                    className: "custom-overview-map"
                                }),
                                new ol.control.ScaleLine({units: "metric"}),
                                new ol.control.FullScreen({className: "custom-fullscreen"}),
                                new ol.control.MousePosition({
                                    coordinateFormat: ol.coordinate.createStringXY(4),
                                    projection: "EPSG:4326",
                                    className: "custom-mouse-position"
                                })
                            ]),
                        logo: false
                    }); //Map初始化
                    document.getElementById(this.id).parentElement.parentElement.onclick = function () {
                        //地图不变形
                        that.map.updateSize();
                    };
                    //去掉鹰眼的放大缩小按钮
                    that.map.controls.array_[3].element.lastElementChild.style.display = "none";
                });
                console.log(this.id);
            },
        },
        mounted() {
            this.mapInit();
        },
        created() {
        },
        computed: {
            mapDivParams() {
                let that = this;
                this.$Bus.$on('mapDivParams', (e) => {
                    that.showMapParams = e;
                });
                return that.showMapParams;
            }
        },
        watch: {
            mapDivParams: function () {
                // this.map = this.mapDivParams;
                this.map.getLayers().clear();
                let layers = this.mapDivParams.getLayers();
                for (let i = 0; i < layers.getLength(); i++) {
                    this.map.addLayer(layers.item(i));
                }
                console.log(this.mapDivParams);
                // if(this.mapDivParams){
                //     let that = this;
                //     let vectorLayer = new ol.layer.Vector({
                //         source: new ol.source.Vector({
                //             features: new ol.format.GeoJSON().readFeatures(that.mapDivParams.mapdata, {
                //                 dataProjection: 'EPSG:4326',    // 设定JSON数据使用的坐标系
                //                 featureProjection: 'EPSG:3857' // 设定当前地图使用的feature的坐标系
                //             })
                //         }),
                //         style: that.styleInit
                //     });
                //     let extent = ol.proj.transformExtent(that.mapDivParams.mapdata.bbox, 'EPSG:4326', 'EPSG:3857');
                //     that.map.getView().fit(extent, that.map.getSize());//视图更新到当前图层的bbox
                //     that.map.addControl(new ol.control.ZoomToExtent({
                //         extent: extent,
                //         className: "custom-zoom-extent"
                //     }));//增加缩放到当前图层控件
                //     that.map.addLayer(vectorLayer);
                //     return vectorLayer;
                // }else {
                //     console.log('error');
                // }
            }
        }
    }
</script>

<style>
    .edit {
        /*background: #5daf34;*/
        position: absolute;
        right: 7%;
        top: 3%;
        /*font-size: 14px;*/
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
        z-index: 999;
    }

    .close {
        /*background: #5daf34;*/
        position: absolute;
        right: 3%;
        top: 3%;
        font-size: 14px;
        padding-right: 3px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
        z-index: 999;
    }

    .edit:hover {
        color: #4060ff
    }

    .close:hover {
        color: #4060ff
    }

    .vue-draggable-handle {
        /*background: #5daf34;*/
        position: absolute;
        left: 1%;
        top: 2%;
        font-size: 14px;
        box-sizing: border-box;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: inline-flex;
        cursor: pointer;
    }

    .vue-draggable-handle:hover {
        color: #4060ff
    }

    .ol-overlaycontainer-stopevent {
        display: none;
    }

    /*.ol-viewport{*/
    /*width: 98%!important;*/
    /*height:98%!important;*/
    /*}*/
    /*.mapdiv{*/
    /*padding:0 0px 2px 0;*/
    /*}*/


</style>